﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel"
  :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg"
  :commonConfig="commonConfig">
    <ul class="ipAdress" :style="myConfig.myStyle" :hidden="!isShow">
      <li v-for="(item,index) in ipAdress" :key="index">
        <input
          type="text"
          :disabled="!myConfig.isEnable"
          :readonly="myConfig.other.isReadOnly"
          @input="checkIpVal(item,index)"
          @keyup="turnIpPOS(item,index,$event)"
          v-model="item.value"
          ref="ipInput"
          @change="handleChange"
        />
        <div></div>
      </li>
    </ul>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
export default {
  components: {
    baseComponent, baseUI
  },
  extends: baseComponent,
  mounted () {
    if (this.value) {
      this.value.split('.')
      this.setValue(this.value)
    }
  },
  data () {
    return {
      ipAdress: [
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        }
      ]
    }
  },
  methods: {
    isDataComponent () {
      return true
    },
    setValue (v) {
      let reg = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?)(,((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?))*$/
      if (v && reg.test(v)) {
        let arr = v.split('.')
        this.ipAdress[0].value = arr[0]
        this.ipAdress[1].value = arr[1]
        this.ipAdress[2].value = arr[2]
        this.ipAdress[3].value = arr[3]
        this.$set('update:value', this.getValue())
      }
    },
    getValue () {
      return this.ipAdress[0].value + '.' + this.ipAdress[1].value + '.' + this.ipAdress[2].value + '.' + this.ipAdress[3].value
    },
    clearData () {
      this.ipAdress = [
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        }
      ]
    },
    checkIpVal (item, index) {
      // 输入时事件
      // let self = this
      // 确保每个值都处于0-255
      let self = this
      let val = item.value
      // 当输入的是空格时，值赋为空
      val = val.trim()
      val = parseInt(val, 10)
      if (isNaN(val)) {
        val = ''
      } else {
        val = val < 0 ? '' : val
        val = val > 255 ? 255 : val
      }
      item.value = val
      if (val > 99 && index < this.ipAdress.length - 1) {
        // 判断内容是否可以跳框
        self.$refs.ipInput[index + 1].focus()
      }
      if (val === '' && index !== 0) {
        self.$refs.ipInput[index - 1].focus()
      }
    },
    turnIpPOS (item, index, event) {
      let self = this
      let e = event || window.event
      // 左箭头向左跳转，左一不做任何措施
      if (e.keyCode === 37) {
        if (index === 0) {
        } else {
          console.log(index)

          self.$refs.ipInput[index - 1].focus()
        }
      }
      // 右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
      if (
        e.keyCode === 39 ||
        e.keyCode === 13 ||
        e.keyCode === 32 ||
        e.keyCode === 190
      ) {
        if (index === 3) {
        } else {
          console.log(index)
          self.$refs.ipInput[index + 1].focus()
        }
      }
    },
    handleChange () {
      this.onChange()
    }
  },
  watch: {
    ipAdress: {
      handler: function (val, oldVal) {
        this.selectedValue = this.getValue()
      },
      deep: true
    }
  }
}
</script>
<style type="text/css" scoped>
  .ipAdress{
    display: flex;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: 196px;
    height: 36px;
    padding-inline-start: 0px;
    margin: 0 ;
  }
  .ipAdress li{
    position: relative;
    margin: 0;
    list-style-type: none;
  }
  .ipInputClass{
    border: none;
    width: 49px;
    height: 23px;
    text-align: center;
    background: transparent;
  }
  .ipAdress li div{
    position: absolute;
    bottom: 8px;
    right: 0;
    border-radius: 50%;
    background: #505050;
    width: 2px;
    height: 2px;
  }
  /*只需要3个div*/
  .ipAdress li:last-child div{
    display: none;
  }
  /*取消掉默认的input focus状态*/
  .ipAdress input:focus{
    outline: none;
  }
</style>
